<template>
  <view>
    <!-- 顶部搜索框，使用 uni-app 自带的搜索组件 uni-search-bar -->
    <view class="search-box">
      <uni-search-bar @input="input" :focus="true" placeholder="请输入搜索内容" cancelButton="none" radius="100"
        bgColor="#fff"></uni-search-bar>
    </view>

    <!-- 搜索建议列表区域 -->
    <view class="sugg-list" v-if="(searchResults.length !== 0)">
      <view v-for="(item, i) in searchResults" :key="i" class="sugg-item" @click="gotoGoodsDetail(item.goods_id)">
        <text class="goods-name">{{item.goods_name}}</text>
        <uni-icons type="arrowright" size="16" />
      </view>
    </view>

    <!-- 搜索历史关键字显示区域 -->
    <view class="history-box">
      <!-- 搜索标题和垃圾桶图标区域 -->
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons @click="clearHistory" type="trash" size="17" />
      </view>
      <!-- 搜索历史关键字列表显示区域 -->
      <view class="history-list">
        <navigator v-for="(item, i) in histories" :key="i" :url="'/subpkg/goods_list/goods_list?query=' + item">
          <uni-tag type="default" :text="item" />
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 搜索输入框防抖（防止输入每个字符都触发input输入事件）定时器变量
        timer: null,
        // 搜索框输入搜索关键字
        kw: '',
        // 搜索结果列表
        searchResults: [],
        // 搜索历史关键字列表
        historyList: []
      }
    },
    onLoad() {
      // 直接从本地存储获取搜索关键字历史列表数据
      this.historyList = JSON.parse(uni.getStorageSync('historyList') || '[]') //如果转对象失败，则默认用空数组转为对象
    },
    // 定义计算属性
    computed: {
      // 定义返回搜索历史关键字数组 this.historyList.reverse() 反转后的结果副本，将最后搜索的关键字放到副本的最前面，而不要用 this.historyList.unshift() 直接修改原数组放到最前面
      histories() {
        // 需用 ... 解构数组后，再返回，否则还是修改原数组 this.historyList
        return [...this.historyList].reverse()
      }
    },
    methods: {
      // 搜索框输入内容事件函数
      input(val) {
        // 搜索输入框防抖（防止输入每个字符都触发input输入事件），500毫秒才触发一次ajax请求
        // 注意，这里不能用定时器 setInterval，无论是否输入都一直发起主请求，要用延时器 setTimeout
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.kw = val
          // 调用发起 ajax 请求获取搜索数据列表的函数
          this.getSearchList()
        }, 500)
      },
      // 发起 ajax 请求获取搜索数据列表的函数
      async getSearchList() {
        if (this.kw.trim().length === 0) { // 如果输入关键字为空，或只有空格字符
          this.searchResults = []
          return
        }
        const {data: res} = await uni.$http.get('/api/public/v1/goods/qsearch', {query: this.kw})
        if (res.meta.status !== 200) return uni.$showMsg()
        this.searchResults = res.message

        // 保存每次输入的搜索关键字到搜索历史数组 this.historyList
        this.saveSearchHistory()
      },
      // 跳转到商品详细页面 goods_detail
      gotoGoodsDetail(goods_id) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id
        })
      },
      // 保存搜索关键字为历史记录函数
      saveSearchHistory() {
        // 搜索历史关键字数组转为 set 对象,处理去重
        //这里直接用this.history，不用 ... 展开解构数组也可以
        const set = new Set([...this.historyList])
        //添加关键字前，先删除，可以将输入的已重复的关键字添加到最后
        set.delete(this.kw)
        // 如果不执行以上的先删除重复的关键字，直接添加，关键字在数组的位置不变
        set.add(this.kw)
        // 保存搜索关键字为历史记录（将set对象转换为数组）
        this.historyList = Array.from(set)
        // console.log(this.historyList)
        // console.log(set)

        // 调用 uni.setStorageSync(key, val) 将搜索关键字数组持久化存储到本地，在onLoad函数中，直接从本地读取
        uni.setStorageSync('historyList', JSON.stringify(this.historyList))
      },
      // 点击搜索历史栏垃圾桶图标，清空搜索历史记录处理函数
      clearHistory() {
        //底部弹出选择菜单，比模态框 uni.showModal() 的优势是，可以定义多个选择按钮
        /* 
        uni.showActionSheet({
          title: '确定要清空所有搜索历史记录吗？', // 弹出框标题：除微信小程序外，其它平台如支付宝，App仅真机都生效
          alertText: '确定要清空所有搜索历史记录吗？', // 弹出框标题：仅微信小程序真机生效
          itemList: ['确定', '取消'], // 按钮数组
          itemColor: '#C00000', // 按钮文字颜色,
          success: function(res) {
            console.log('选中了第' + (res.tapIndex + 1) + '个按钮')
          },
          fail: function(res) {
            console.log(res.errMsg)
          }
        })
        */
       
       // 弹出[确定]的[取消]按钮的模态框确认是否需要清空搜索历史记录
       uni.showModal({
         title: '操作确认',
         content: '确定要清空所有搜索历史记录吗？',
         showCancel: true,  // 是否显示[取消]按钮，默认 true
         cancelText: '取消',  // 取消按钮显示的文字，默认为'取消'
         confirmText: '确定',  // 确定按钮显示的文字，默认为'确定'
         // editable: true,  // 是否将 content 提示内容显示在可编辑的输入框，默认为false
         confirmColor: 'red',  // 确定按钮文字颜色，微信小程序默认为灰蓝色 #576B95
         cancelColor: '#333',  // 取消按钮颜色，默认为黑色 #000000
         success: (res) => {  // 用箭头函数，函数体内的 this 才能指向 page，否则指向 undefined
           if(res.confirm) {
             this.historyList = []
             uni.setStorageSync('historyList', '[]')
           }else if(res.cancel) {
             return
           }
         }
       })
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    background-color: #C00000;
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .sugg-list {
    background-color: #FFFFFF;
    padding: 0 5px;

    .sugg-item {
      font-size: 12px;
      padding: 13px 0;
      border-bottom: 1px solid #efefef;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .goods-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 3px;
      }
    }
  }

  .history-box {
    padding: 0 5px;

    .history-title {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      font-size: 13px;
      border-bottom: 1px solid #efefef;
    }

    .history-list {
      display: flex;
      flex-wrap: wrap;

      /* .uni-tag 为 uni-tag 组件标签的类名，在微信开发者工具的调试wxml代码中可见,这里可以改写 覆盖uni-tag标签定义的一些样式*/
      .uni-tag {
        display: block;
        margin-top: 5px;
        margin-right: 5px;
        background-color: #e1e1e1;
        color: #666;
        border: 0;
      }
    }
  }

  page {
    background-color: #FFFFFF;
  }
</style>
